<template>
	<view>
		<!-- BarTitle -->
		<home-barTittle :title="title" :showBack="true"></home-barTittle>
		
		<view class="pd16_15">
			<block v-for="(value,key) in courseList" :key="key">
				<view class="box pd16_15 flex alcenter mb16" style="position: relative;" @click="getCourseInfo(value.courseId)">
					<image mode="aspectFill" class="tuan-product-l" :src="value.courseImg"></image>
					<view class="tuan-product-r pl15">
						<view class="ft14 ftw600 cl-main text-over2">{{value.courseName}}</view>
						<view class="mt16">
							<text class="ft12 cl-orange">活动报名中</text>
							<!-- <text class="ft16 cl-orange ftw600">{{value.vipprice}}</text> -->
							<!-- <text class="ml15 ft12 cl-notice text-line">¥{{value.price}}</text> -->
							<!-- <text class="ml15 ft12 cl-notice">¥{{value.price*1}}</text> -->
						</view>
						<view class="mt16 flex space alcenter"  v-show="value.activityLeavings >= 0">
							<view class="ft12 cl-notice">播放量：{{value.activityLeavings}}</view>
						</view>
					</view>
				</view>
			</block>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
		
		
		
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
	</view>
</template>

<script>
// import zaudio from '@/components/uniapp-zaudio/zaudio';
// import zaudio from 'uniapp-zaudio/zaudio'
export default {
	// components: { zaudio: zaudio },
		data(){
			return {
				title:"课程列表",

				tabs:[],
				typeId:0,
				courseList:[{
					courseId:'',
					courseImg:'',
				}],
				total:0,
				pageSize:6,
				pageNum: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有数据了'
				},
				
				isLogin:false,
				showLogin:false,
			}
		},
		onLoad(option){
			console.log("onload")
			console.log(option)
		},
		onShow() {
			this.pageNum = 1;
			this.courseList = [];
			this.getCourseList();
			
			if(uni.getStorageSync("userinfo").token){
				this.isLogin = true
				this.showLogin = false
			}
		},
		onReachBottom() {
			this.status = 'more';
			console.log(this.total / this.pageSize)
			if(this.pageNum <= (this.total / this.pageSize) +1 ){
				this.getCourseList();
			}
		},
		methods:{
			// 跳转详情页
			getCourseInfo(id){
				console.log("getCourseInfo")
				uni.navigateTo({
					url:'/sub_pages/course/info?courseId='+id
					// url:'/sub_pages/activity/info'
				})
			},
			
			// 获取tabs列表
			getTypeList() {
				uni.request({
					url: this.configs.webUrl+'/miniapp/activitytype/list',
					success: data => {
						if (data.data.total>0) {
							this.activityTypeList = data.data.rows
							this.tabs=data.data.rows.map(function(item) {return item.activityTypeName;})
							console.log("this.tabs")
							console.log(this.tabs)
							console.log("this.activityTypeList")
							console.log(this.activityTypeList)
						}
					},
					fail: (data, code) => {
					}
				});
			},
			
			// 根据活动类型获取活动列表
			getCourseList() {
				if (this.pageNum>1) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
				}
				
				let url =this.configs.webUrl+'/miniapp/course/list?pageNum='+this.pageNum+'&pageSize='+this.pageSize
				console.log("url",url)
				uni.request({
					url: url,
					method:'GET',
					success: data => {
						if (data.data.total>0) {
							this.total = data.data.total;
							
							let list = data.data.rows;
							this.courseList = this.reload ? list : this.courseList.concat(list);
							this.reload = false;
							this.pageNum = this.pageNum+1;
							if(data.data.total<this.pageNum*this.pageSize){
								this.status = '';
							}
							
						}else{
							this.courseList=[];
							this.contentText.contentdown='没有更多数据啦！'
							this.status=''
						}
					},
					fail: (data, code) => {
					}
				});
			},
			
		
			loginYes(){
				if(this.nextStep == 'buy'){
					uni.navigateTo({
						url:'/sub_pages/scenicArea/buy'
					})
				}else{
					uni.navigateTo({
						url:'/pages/client/vipcard/adviser'
					})
				}
			},
			changeIndex(index){
				this.selectIndex = index;
				this.typeId = this.activityTypeList[this.selectIndex].activityTypeId
				this.activityList = []
				this.pageSize =4
				this.pageNum = 1
				this.getActivityList()
			}
		}
	}
</script>

<style>
	.user-not-vip{
		width: 100%;
		height: 80rpx;
		background: #FDF6EC;
		border-radius: 40rpx;
		border: 2rpx solid #EFC381;
		text-align: center;
		line-height: 76rpx;
		font-size: 24rpx;
		color:#000000;
		font-weight: bold;
	}
	
	.tuan-detail-header{
		position: relative;
	}
	.tuan-detail-swiper{
		height: 500rpx;
	}
	.tuan-detail-swiper image{
		width: 100%;
		height: 500rpx;
		background: #F2F2F2;
	}
	.tuan-detail-tit{
		width: 100%;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		margin-top: -32rpx;
	}
	.tuan-detail-content-tab{
		height: 102rpx;
	}
	.tuan-detail-content{
		min-height: calc(100vh - 600rpx);
		background: #FFFFFF;
	}
	.tuan-product-l{
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}
	.tuan-product-r{
		width: calc(100% - 320rpx);
	}
	.cl-orange1{
		margin-right: 10upx;
		padding: 15upx;
		border: 1px solid #CCCCCC;
	}
	.mini-btn{
		margin-left: 10upx;
		margin-bottom: 10upx;
	}
</style>